<template>
    <div class="xiaoquan-dropdown">
<!--        {{ trigger }}-->
        <!-- 触发元素（事件源） -->
        <XiaoQuan-Tooltip
            ref="tooltipRef"
            :trigger="trigger"
            :placement="placement"
            :open-delay="openDelay"
            :close-delay="closeDelay"
            :manual="manual"
            @visible-change="visibleChangeHandler"
        >
            <slot/>
            <template #content>
                <ul class="xiaoquan-dropdown__menu">
                    <template v-for="item in menuOptions" :key="item.key">
                        <li v-if="item.divided" class="divided-placeholder"></li>
                        <li
                            @click="itemClick(item)"
                            class="xiaoquan-dropdown__item"
                            :class="{'is-disabled': item.disabled}"
                            :id="`dropdown-item-${item.key}`"
                        >
                            <RenderVnode :v-node="item.label"/>
                        </li>
                    </template>
                </ul>
            </template>
        </XiaoQuan-Tooltip>
    </div>
</template>

<script setup>
    import { ref } from "vue";
    import RenderVnode from "@/components/Common/RenderVnode";
    import propsObj from "./props";
    defineOptions({
        name: "XiaoQuan-Dropdown"
    });
    const props = defineProps(propsObj);
    const emit = defineEmits(['select', 'visible-change']);
    const tooltipRef = ref(null);
    const itemClick = (item)=> {
        console.log(tooltipRef.value.show)
        if(item.disabled) return;
        emit('select', item);
        if(props.hideAfterClick) {
            tooltipRef.value.hide();
        }
    }
    const visibleChangeHandler = (status)=> {
        emit('visible-change', status);
    }

    defineExpose({
        show: ()=> tooltipRef.value.show(),
        hide: ()=> tooltipRef.value.hide()
    })
</script>

<style scoped lang="scss">

</style>